<template>
  <p>vuex</p>
  <p>name1第一种获取:{{ store.state.name1 }}</p>
  <p>name1第二种获取:{{ name1 }}</p>
  <p>getters第一种获取:{{ store.getters.getName }}</p>
  <p>getters第二种获取:{{ getName }}</p>
  <el-button @click="store.commit('changeName', '李四')" type="primary"
    >点击改变name1第一种</el-button
  >
  <el-button @click="changeName('李五')" type="primary"
    >点击改变name1第二种</el-button
  >
  <el-button @click="store.dispatch('fetchMsg', '张三')" type="primary"
    >点击异步改变name1第一种</el-button
  >
  <el-button @click="fetchMsg('张四')" type="primary"
    >点击异步改变name1第二种</el-button
  >
  <p>store2第一种获取:{{ store.state.store2.store2name }}</p>
  <p>store2第二种获取store2name:{{ store2name }}</p>
  <p>store2第二种获取store2number:{{ store2number }}</p>
  <p>store2中的getters：{{ store2GetMsg }}</p>
  <el-button type="primary" size="small" @click="handClick4"
    >改变store2number得值</el-button
  >
  <el-button type="primary" size="small" @click="handClick5"
    >改变number得值传参</el-button
  >
  <el-button type="primary" size="small" @click="handClick6"
    >异步改变number得值传参</el-button
  >
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  computed: {
    ...mapState(["name1"]),
    ...mapGetters(["getName"]),
    ...mapState("store2", ["store2name", "store2number"]),
    ...mapGetters("store2", ["store2GetMsg"]),
  },
  methods: {
    ...mapMutations(["changeName"]),
    ...mapActions(["fetchMsg"]),
    ...mapMutations("store2", ["store2setNumber"]),
    ...mapActions("store2", ["store2setNum"]),
    handClick4() {
      // this.$store.commit('store2/store2setNumber')
      this.store2setNumber();
    },
    handClick5() {
      // this.$store.commit('setNumber', 2)
      this.store2setNumber(2);
    },
    handClick6() {
      // this.$store.commit('setNumber', 2)
      this.store2setNum(10);
    },
  },
};
</script>
<script setup>
import { computed } from "vue";
import { useStore } from "vuex";
const store = useStore();
</script>

<style lang="scss" scoped></style>
